/**
 * @file layouts/Main.js
 * @author maoquan(maoquan@htsc.com)
 */

import React, { Component, PropTypes } from 'react';
import { withRouter, routerRedux } from 'dva/router';
import { connect } from 'dva';
import { Helmet } from 'react-helmet';
import classnames from 'classnames';

import Loading from '../components/common/Loading';
import { constants } from '../config';

import Header from './Header';
import Footer from './Footer';
import Sider from './Sider';
import MenuTabs from './MenuTabs';

import styles from './main.less';
import '../css/main.less';

const mapStateToProps = state => ({
	...state.app,
	loading: state.loading.global,
	userInfo: state.login.userInfo,
});

const mapDispatchToProps = {
	push: routerRedux.push,
	switchMenuPopover: () => ({
		type: 'app/switchMenuPopover',
	}),
	switchSider: () => ({
		type: 'app/switchSider',
	}),
	changeOpenKeys: openKeys => ({
		type: 'app/changeOpenKeys',
		payload: { navOpenKeys: openKeys },
	}),
	changeTheme: () => ({
		type: 'app/changeTheme',
	}),
	loginout: () => ({
		type: 'login/loginout',
	}),
};

@withRouter
@connect(mapStateToProps, mapDispatchToProps)
export default class Main extends Component {

	static propTypes = {
		children: PropTypes.node.isRequired,
		location: PropTypes.object.isRequired,
		menuPopoverVisible: PropTypes.bool.isRequired,
		loading: PropTypes.bool.isRequired,
		// 侧栏折叠
		siderFold: PropTypes.bool.isRequired,
		// 是否深色主题
		darkTheme: PropTypes.bool.isRequired,
		useMenuPopover: PropTypes.bool.isRequired,
		// navOpenKeys: PropTypes.array.isRequired,

		switchMenuPopover: PropTypes.func.isRequired,
		switchSider: PropTypes.func.isRequired,
		changeOpenKeys: PropTypes.func.isRequired,
		changeTheme: PropTypes.func.isRequired,
		loginout: PropTypes.func.isRequired,
	}

	static defaultProps = {
	}

	render() {
		const {
			userInfo,
			children,
			location,
			siderFold,
			darkTheme,
			useMenuPopover,
			menuPopoverVisible,
			navOpenKeys,
			loading,
			// 方法
			switchMenuPopover,
			switchSider,
			changeOpenKeys,
			changeTheme,
			loginout,
		} = this.props;
		const headerProps = {
			siderFold,
			location,
			useMenuPopover,
			menuPopoverVisible,
			navOpenKeys,
			switchMenuPopover,
			switchSider,
			changeOpenKeys,
			userInfo,
			loginout,
		};

		const siderProps = {
			userInfo,
			siderFold,
			darkTheme,
			location,
			navOpenKeys,
			changeTheme,
			changeOpenKeys,

		};

		if (location.pathname === '/login') {
			return <div>{children}</div>;
		}

		return (
			<div>
				<Helmet>
					<link rel="icon" href={constants.logoSrc} type="image/x-icon" />
				</Helmet>
				{/* <iframe style={{display:'none'}} src="http://168.61.13.30:8080/thfx/ReportServer?op=fs_load&cmd=sso&fr_username=thfx&fr_password=thfxuser"></iframe> */}
				<div
					className={
						classnames(
							styles.layout,
							{
								[styles.fold]: useMenuPopover ? false : siderFold,
							},
							{
								[styles.withnavbar]: useMenuPopover,
							},
						)
					}
				>
					{!useMenuPopover
						? (
							<aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}>
								<Sider {...siderProps} {...headerProps} />
							</aside>
						) : ''
					}
					<div className={styles.main}>

						<Header {...headerProps} />
						<div className={styles.container}>
							<div className={styles.content}>

								<MenuTabs {...this.props} />
							</div>
						</div>
						<Footer />
					</div>

				</div>
				<Loading loading={loading}  />
			</div>
		);
	}
}
